<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据数据绘制饼图</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*绘制*/
    /*1.根据年龄分布来绘制饼图*/
    /*2.获取数据*/
    /*3.在饼图中表示出来*/
    var data = [5,30,10,5];

    // 把数据转成弧度
    var angleList = [];
    var total = 0;
    data.forEach(function (item, index) {
        total += item;
    })
    /*第二次的时候就可以绘制 减少遍历*/
    data.forEach(function (item, index) {
        var angle = Math.PI * 2 * (item / total);
        angleList.push(angle);
    })
    console.log(angleList);
    /*根据弧度绘制*/

    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb('+r+','+g+','+b+')'
    }

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    var x0 = w/2;
    var y0 = h/2;
    var startAngle = 0;
    angleList.forEach(function (item, index) {
        /*上一次绘制的结束弧度等于当前次的起始弧度*/
        var endAngle = startAngle + item;
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.arc(x0,y0,150,startAngle,endAngle);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
        /*记录当前的结束位置，作为下一次的起始位置*/
        startAngle = endAngle;
    })

</script>
</body>
</html>
